<template>
  <div>
    <div id="app" class="wrapper wrapper-content">
      <div class="row">
        <div>
          <div class="panel panel-primary">
            <div class="panel-body" style="padding: 0px 50px; box-sizing: border-box;">
              <el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading"
                :disabled="method==='view'  || formReadOnly" :class="method==='view'?'readonly':''" :rules="rules">
                <div style="text-align:center">
                  <h3 style="font-weight: bold;color: black;font-size:24px">工程项目付款合同</h3>
                </div>
                <table style="margin:0 auto;width:80%;margin-top:20px;border-collapse: collapse;margin-bottom:20px">
                  <tr style="line-height: 3.5;">
                    <td colspan="4"
                      style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
                      <img src="../../../../../assets/imgs/processManagement/work.png" alt=""
                        style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
                      基本信息
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15">申 请 人</td>
                    <td class="width-30">
                      <el-form-item prop="people.id">
                        <user-select :limit='1' :value="inputForm.people.id"
                          @getValue='(value) => {inputForm.people.id=value}' disabled>
                        </user-select>
                      </el-form-item>
                    </td>
                    <td class="width-15">所属公司</td>
                    <td class="width-30">
                      <el-form-item prop="peopleOffice.id">
                        <SelectTree ref="peopleOffice" :props="{
                          value: 'id',             // ID字段名
                          label: 'name',         // 显示名称
                          children: 'children'    // 子级字段名
                        }" disabled url="/sys/office/treeData?type=2" :value="inputForm.peopleOffice.id"
                          :clearable="true" :accordion="true"
                          @getValue="(value) => {inputForm.peopleOffice.id=value}" />
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15">申请时间</td>
                    <td class="width-30">
                      <el-form-item prop="date">
                        <el-date-picker v-model="inputForm.date" type="datetime" disabled style="width: 100%;"
                          value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                      </el-form-item>
                    </td>
                    <td class="width-15">所属部门</td>
                    <td class="width-30">
                      <el-form-item prop="peopleDepartment.id">
                        <SelectTree ref="peopleDepartment" :props="{
                          value: 'id',             // ID字段名
                          label: 'name',         // 显示名称
                          children: 'children'    // 子级字段名
                        }" disabled url="/sys/office/treeData?type=2" :value="inputForm.peopleDepartment.id" :clearable="true"
                          :accordion="true" @getValue="(value) => {inputForm.peopleDepartment.id=value}" />
                      </el-form-item>
                    </td>
                  </tr>
                  <tr style="line-height: 3.5;">
                    <td colspan="4"
                      style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
                      <img src="../../../../../assets/imgs/processManagement/work.png" alt=""
                        style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
                      合同信息
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15">合同编号</td>
                    <td class="width-30">
                      <el-form-item prop="contractNumber">
                        <el-input v-model="inputForm.contractNumber" disabled></el-input>
                      </el-form-item>
                    </td>
                     <td class="width-15"><span style="color: red">*&nbsp;</span>合同名称</td>
                    <td class="width-30">
                      <el-form-item prop="contractName" :rules="[{required: true, message:'合同名称不能为空', trigger:'blur'}]">
                        <el-input v-model="inputForm.contractName" :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden" v-if="showButton">
                    <td class="width-15">
                      <span style="color: red">*&nbsp;</span>甲<span style="margin-left: 20px">方</span>
                    </td>
                    <td class="width-30">
                      <el-form-item prop="partyA.id" :rules="[
                          {
                            required: true,
                            message: '甲方不能为空',
                            trigger: ['blur','change'],
                          },
                        ]">
                        <SelectTree :disabled="method==='edit'" ref="partyA" :props="{
                            value: 'id', // ID字段名
                            label: 'name', // 显示名称
                            children: 'children', // 子级字段名
                          }" url="/sys/office/treeData?type=2" :value="inputForm.partyA.id" :clearable="true"
                          :accordion="true" @getValue="
                            (value) => {
                              inputForm.partyA.id = value;
                            }
                          " />
                      </el-form-item>
                    </td>
                    <td class="width-15">
                      <span style="color: red">*&nbsp;</span>乙<span style="margin-left: 20px">方</span>
                    </td>
                    <td class="width-30">
                      <el-form-item prop="partyB" :rules="[
                          {
                            required: true,
                            message: '乙方不能为空',
                            trigger: ['blur', 'change'],
                          },
                        ]">
                        <el-input v-model="inputForm.partyB" placeholder="请填写" :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden" v-if="showButton">
                    <td class="width-15">
                      <!-- <span style="color: red">*&nbsp;</span> -->
                      合同金额(￥)
                    </td>
                      <!-- :rules="[
                          {
                            required: true,
                            message: '合同金额不能为空',
                            trigger: 'blur',
                            pattern: /^\d*\.?(\d|\d{2})$/,
                          },
                        ]" -->
                    <td class="width-30">
                      <el-form-item prop="contractAmount">
                        <el-input v-model="inputForm.contractAmount" @input="moneySwitch" disabled>
                        </el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15">大写金额</td>
                    <td class="width-30">
                      <el-form-item prop="capitalizeContract">
                        <el-input v-model="inputForm.capitalizeContract" disabled></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden" v-if="showButton">
                    <td class="width-15">付款金额(￥)</td>
                    <td class="width-30">
                      <el-form-item prop="refundAmount">
                        <el-input v-model="inputForm.refundAmount" :disabled="method === 'edit'"></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15">大写金额</td>
                    <td class="width-30">
                      <el-form-item prop="returnCapital">
                        <el-input v-model="inputForm.returnCapital" disabled></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden" v-if="showButton">
                    <td class="width-15">
                      <span style="color: red">*&nbsp;</span>未付款金额(￥)
                    </td>
                    <td class="width-30">
                      <el-form-item prop="unpaidAmount">
                        <el-input v-model="inputForm.unpaidAmount" :disabled="method === 'edit'"></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15">大写金额</td>
                    <td class="width-30">
                      <el-form-item prop="capitalizedAmount">
                        <el-input v-model="inputForm.capitalizedAmount" disabled></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden" v-if="showButton">
                    <td class="width-15">付款比例(%)</td>
                    <td class="width-30">
                      <el-form-item prop="receiptRatio">
                        <el-input v-model="inputForm.receiptRatio" :disabled="method === 'edit'"></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15">未付款比例(%)</td>
                    <td class="width-30">
                      <el-form-item prop="unpaidRatio">
                        <el-input v-model="inputForm.unpaidRatio" :disabled="method === 'edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15">关联合同类型</td>
                    <td class="width-30">
                      <el-form-item prop="associatedType">
                        <el-select v-model="inputForm.associatedType" :disabled="method==='edit'" placeholder="请选择" style="width: 100%;"
                          @change="associatedTypeChange">
                          <el-option v-for="item in $dictUtils.getDictList('type_of_contract')" :key="item.value"
                            :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </td>
                    <td class="width-15">关联合同</td>
                    <td class="width-30">
                      <el-form-item prop="associatedContractName">
                        <el-input v-model="inputForm.associatedContractName" disabled placeholder="请填写关联合同"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHiddens errorMsg">
                    <td class="width-15">
                      <span style="color: red">*&nbsp;</span>部门负责人
                    </td>
                    <td class="width-30" style="width: 32%">
                      <el-form-item
                        prop="contractPerson.id"
                        :rules="[
                          {
                            required: true,
                            message: '部门负责人不能为空',
                            trigger: ['blur','change'],
                          },
                        ]"
                      >
                        <GridSelects
                          :disabled="method === 'edit'"
                          title="选择负责人"
                          labelName="name"
                          labelValue="id"
                          :value="inputForm.contractPerson.id"
                          :limit="1"
                          @getValue="getValuaesUser2(arguments)"
                          :columns="[
                            {
                              prop: 'name',
                              label: '用户名',
                            },
                            {
                              prop: 'office.name',
                              label: '部门',
                            },
                          ]"
                          :searchs="[
                            {
                              prop: 'name',
                              label: '用户名',
                            },
                            {
                              prop: 'office.name',
                              label: '部门',
                            },
                          ]"
                          :dataListUrl="setAPersonUrl2"
                          entityBeanName="user"
                          queryEntityUrl="/sys/user/queryById"
                        >
                        </GridSelects>
                        <!-- <user-select
                          :limit="1"
                          :value="inputForm.contractPerson.id"
                          @getValue="
                            (value) => {
                              inputForm.contractPerson.id = value;
                            }
                          "
                        ></user-select> -->
                      </el-form-item>
                    </td>
                    <td class="width-15"   v-if="showButton && this.$route.query.types"><span style="color: red">*&nbsp;</span>签约时间</td>
                    <td class="width-30"   v-if="showButton && this.$route.query.types">
                        <el-form-item  prop="signingTime"  :rules="[{required: true, message:'签约时间不能为空', trigger:['blur','change']}]">
                          <el-date-picker   :disabled="power==0 || power==2 ||power ==3"
                            v-model="inputForm.signingTime"
                            type="date"
                            style="width: 100%;"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择">
                          </el-date-picker>
                        </el-form-item>
                    </td>
                    <td v-if="!this.$route.query.types" class="width-15"></td>
                    <td v-if="!this.$route.query.types" class="width-30"></td> 
                  </tr>
                  <tr class="iconHidden"    v-if="showButton && this.$route.query.types">
                      <td class="width-15"><span style="color: red">*&nbsp;</span>开始时间</td>
                      <td class="width-30">
                          <el-form-item prop="begintime"   :rules="[{required: true, message:'开始时间不能为空', trigger:['blur','change']}]">
                                <el-date-picker     :disabled="power==0 || power==2 ||power ==3"
                                  v-model="inputForm.begintime"
                                  type="date"
                                  style="width: 100%;"
                                  value-format="yyyy-MM-dd"
                                  @change="judgeHour"
                                  placeholder="请选择">
                                </el-date-picker>
                          </el-form-item>
                      </td>
                      <td class="width-15"><span style="color: red">*&nbsp;</span>结束时间</td>
                      <td class="width-30">
                          <el-form-item prop="endtime"  :rules="[{required: true, message:'结束时间不能为空', trigger:['blur','change']}]">
                          <el-date-picker     :disabled="power==0 || power==2 ||power ==3"
                                v-model="inputForm.endtime"
                                type="date"
                                style="width: 100%;"
                                value-format="yyyy-MM-dd"
                                @change="judgeHour"
                                placeholder="请选择">
                              </el-date-picker>
                          </el-form-item>
                      </td>
                  </tr>
                  <tr class="iconHiddens errorMsg"    v-if="showButton && this.$route.query.types">
                      <td class="width-15"><span style="color: red">*&nbsp;</span>合同形式</td>
                      <td class="width-30">
                          <el-form-item  prop="contractForm"  :rules="[{required: true, message:'合同形式不能为空', trigger:['blur','change']}]"> 
                            <el-select v-model="inputForm.contractForm" placeholder="请选择"  style="width: 100%;" @change="contractFormChange" :disabled="power==0 || power==2 ||power ==3">
                                <el-option
                                  v-for="item in $dictUtils.getDictList('contract_forms')"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                            </el-select>
                          </el-form-item>
                      </td> 
                      <td class="width-15" v-if="inputForm.contractForm==0 && inputForm.contractForm"><span style="color: red">*&nbsp;</span>保 管 人</td>
                      <td class="width-30" v-if="inputForm.contractForm==0 && inputForm.contractForm"  style="width:32%">
                          <el-form-item   prop="user.id"  :rules="[{required: true, message:'保 管 人不能为空', trigger:['blur','change']}]">
                            <user-select  :limit='1' :value="inputForm.user.id" @getValue='(value) => {inputForm.user.id=value}' readonly   :disabled="!inputForm.contractForm || inputForm.contractForm==1 || power==0 || power==2 ||power ==3"></user-select>
                          </el-form-item>
                      </td>
                      <td class="width-15" v-if="inputForm.contractForm==1 && inputForm.contractForm">是否电子签</td>
                      <td class="width-30" v-if="inputForm.contractForm==1 && inputForm.contractForm">
                        <el-select v-model="signatureVal" placeholder="请优先选择归档附件" style="width: 100%;"  :disabled="power==0 || power==2 ||power ==3 ||!inputForm.archiveAnnex" @change="signatureChange">
                          <el-option v-for="item in signatureOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </td>  
                      <td class="width-15" v-if="!inputForm.contractForm"></td>
                      <td class="width-30" v-if="!inputForm.contractForm"></td>         
                  </tr>  
                  <tr class="iconHiddens"    v-if="showButton  && this.$route.query.types&& inputForm.contractForm==0 && inputForm.contractForm">  
                      <td class="width-15"><span style="color: red">*&nbsp;</span>合同存放位置</td>
                      <td class="width-30" >
                          <el-form-item   prop="contractLocation"  :rules="[{required: true, message:'合同存放位置不能为空', trigger:['blur','change']}]">
                            <el-input  v-model="inputForm.contractLocation"   :disabled="!inputForm.contractForm || inputForm.contractForm==1 || power==0 || power==2 ||power ==3"></el-input>
                          </el-form-item>
                      </td> 
                      <td class="width-15"></td>
                      <td class="width-30">                               
                      </td> 
                  </tr> 
                  <tr class="iconHiddens"    v-if="showButton  && this.$route.query.types">
                    <td class="width-15"><span v-if="inputForm.contractForm==1" style="color: red">*&nbsp;</span>归档附件</td>
                    <td colspan="4" style="position: relative">
                      <!-- :on-preview="handlePreview" -->
                      <el-form-item  prop="archiveAnnex"  v-if="inputForm.contractForm==1" :rules="[{required: true, message:'归档附件不能为空', trigger:['blur','change']}]">
                        <el-upload ref="archiveAnnex" :disabled="
                            inputForm.contractForm == 0 ||
                            power == 0 ||
                            power == 2 ||
                            power == 3
                          "
                          :action="`${this.$http.BASE_URL}/dlyrlTest/contractUpload`"
                          :headers="{ token: $cookie.get('token') }" :on-preview="
                            (file) => {
                              $window.open(
                                (file.response && file.response.url) ||
                                  file.url,
                                '_blank'
                              );
                            }
                          " :on-success="
                            (response, file, fileList) => {
                              inputForm.archiveAnnex = fileList
                                .map(
                                  (item) =>
                                    (item.response && item.response.url) ||
                                    item.url
                                )
                                .join('|');
                              this.$refs.inputForm.clearValidate(['archiveAnnex'])
                              archiveAnnexId = fileList.map(item =>(item.response && item.response.id) || item.id).join('|');
                            }
                          " :on-remove="
                            (file, fileList) => {
                              $http
                                .post(
                                  `/sys/file/webupload/deleteByUrl?url=${
                                    (file.response && file.response.url) ||
                                    file.url
                                  }`
                                )
                                .then(({ data }) => {
                                  $message.success(data.msg);
                                });
                              inputForm.archiveAnnex = fileList
                                .map((item) => item.url)
                                .join('|');
                            }
                          " :before-remove="
                            (file, fileList) => {
                              return $confirm(`确定移除 ${file.name}？`);
                            }
                          " multiple :limit="1" :on-exceed="
                            (files, fileList) => {
                              $message.warning(
                                `当前限制选择 1个文件，本次选择了 ${
                                  files.length
                                } 个文件，共选择了 ${
                                  files.length + fileList.length
                                } 个文件`
                              );
                            }
                          " :file-list="archiveAnnexArra">
                          <el-button size="small" type="primary" style="
                              position: absolute;
                              right: 5px;
                              top: 0px;
                              padding: 9px;
                            "><i class="fa fa-cloud-upload"></i></el-button>
                        </el-upload>
                        <!-- <el-input
                          v-model="inputForm.archiveAnnex"
                          placeholder="请填写归档附件"
                        ></el-input> -->
                      </el-form-item>
                      <el-form-item  prop="archiveAnnex"  v-if="inputForm.contractForm==0" >
                        <el-upload ref="archiveAnnex" disabled
                          :action="`${this.$http.BASE_URL}/dlyrlTest/contractUpload`"
                          :headers="{ token: $cookie.get('token') }" :on-preview="
                            (file) => {
                              $window.open(
                                (file.response && file.response.url) ||
                                  file.url,
                                '_blank'
                              );
                            }
                          " :on-success="
                            (response, file, fileList) => {
                              inputForm.archiveAnnex = fileList
                                .map(
                                  (item) =>
                                    (item.response && item.response.url) ||
                                    item.url
                                )
                                .join('|');
                              this.$refs.inputForm.clearValidate(['archiveAnnex'])
                              archiveAnnexId = fileList.map(item =>(item.response && item.response.id) || item.id).join('|');
                            }
                          " :on-remove="
                            (file, fileList) => {
                              $http
                                .post(
                                  `/sys/file/webupload/deleteByUrl?url=${
                                    (file.response && file.response.url) ||
                                    file.url
                                  }`
                                )
                                .then(({ data }) => {
                                  $message.success(data.msg);
                                });
                              inputForm.archiveAnnex = fileList
                                .map((item) => item.url)
                                .join('|');
                            }
                          " :before-remove="
                            (file, fileList) => {
                              return $confirm(`确定移除 ${file.name}？`);
                            }
                          " multiple :limit="1" :on-exceed="
                            (files, fileList) => {
                              $message.warning(
                                `当前限制选择 1个文件，本次选择了 ${
                                  files.length
                                } 个文件，共选择了 ${
                                  files.length + fileList.length
                                } 个文件`
                              );
                            }
                          " :file-list="archiveAnnexArra">
                          <el-button size="small" type="primary"
                              disabled style="
                              position: absolute;
                              right: 5px;
                              top: 0px;
                              padding: 9px;
                            "><i class="fa fa-cloud-upload"></i></el-button>
                        </el-upload>
                        <!-- <el-input
                          v-model="inputForm.archiveAnnex"
                          placeholder="请填写归档附件"
                        ></el-input> -->
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15">
                      附<span style="margin-left: 20px">件</span>
                    </td>
                    <td colspan="4" style="position: relative">
                        <el-upload ref="annex" :disabled="method === 'edit'"
                          :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/dlyrl/oa/propaycontract/propayContract`"
                          :headers="{ token: $cookie.get('token') }" :on-preview="
                            (file) => {
                              $window.open(
                                (file.response && file.response.url) || file.url,
                                '_blank'
                              );
                            }
                          " :on-success="
                            (response, file, fileList) => {
                              inputForm.annex = fileList
                                .map(
                                  (item) =>
                                    (item.response && item.response.url) ||
                                    item.url
                                )
                                .join('|');
                            }
                          " :on-remove="
                            (file, fileList) => {
                              $http
                                .post(
                                  `/sys/file/webupload/deleteByUrl?url=${
                                    (file.response && file.response.url) ||
                                    file.url
                                  }`
                                )
                                .then(({ data }) => {
                                  $message.success(data.msg);
                                });
                              inputForm.annex = fileList
                                .map((item) => item.url)
                                .join('|');
                            }
                          " :before-remove="
                            (file, fileList) => {
                              return $confirm(`确定移除 ${file.name}？`);
                            }
                          " multiple :limit="5" :on-exceed="
                            (files, fileList) => {
                              $message.warning(
                                `当前限制选择 5 个文件，本次选择了 ${
                                  files.length
                                } 个文件，共选择了 ${
                                  files.length + fileList.length
                                } 个文件`
                              );
                            }
                          " :file-list="annexArra">
                          <el-button size="small" type="primary" style="
                              position: absolute;
                              right: 5px;
                              top: 4px;
                              padding: 9px;
                            "><i class="fa fa-cloud-upload"></i></el-button>
                        </el-upload>
                    </td>
                  </tr>
                  <tr style="height: 80px; line-height: 80px" v-if="showButton">
                    <td class="width-15 active" style="line-height: 80px">
                      合同说明
                    </td>
                    <td colspan="4" style="padding: 0 10px">
                      <el-form-item prop="descriptions">
                        <el-input v-model="inputForm.descriptions" :disabled="power == 0 || power == 2 || power == 3">
                        </el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr style="line-height: 3.5;">
                    <td colspan="4"
                      style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
                      <img src="../../../../../assets/imgs/processManagement/basic.png" alt=""
                        style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
                      甲方信息
                       <!-- 短信通知 -->
                      <span v-if="messageSuccess" style="margin-left:150px">
                        <el-button v-show="!messageShow" @click="sendMessage()" type="text"  size="mini" icon="el-icon-s-promotion" >短信通知</el-button>
                        <el-button v-show="messageShow" type="text"  size="mini" icon="el-icon-s-promotion" >{{ sendMessageNum }}s后通知</el-button>
                      </span> 
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15">公<span style="margin-left: 20px">司</span></td>
                    <td class="width-30">
                      <el-form-item prop="aOffice" :rules="[{required: true, message:'甲方公司不能为空', trigger: ['blur','change'],}]">
                        <SelectTree disabled :props="{
                            value: 'id', // ID字段名
                            label: 'name', // 显示名称
                            children: 'children', // 子级字段名
                          }" url="/sys/office/treeData?type=2" :value="inputForm.aOffice" :clearable="true"
                          :accordion="true" @getValue="
                            (value) => {
                              inputForm.aOffice = value;
                            }
                          " />
                        <!-- <el-input v-model="inputForm.aOffice" placeholder="请填写甲方公司"></el-input> -->
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>地<span
                        style="margin-left: 20px">址</span></td>
                    <td class="width-30">
                      <el-form-item prop="aAddress">
                        <el-input v-model="inputForm.aAddress" disabled></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHiddens errorMsg">
                    <td class="width-15"><span style="color: red">*&nbsp;</span>负 责 人</td>
                    <td class="width-30" style="width: 32%">
                      <el-form-item prop="aPerson.id"
                        :rules="[{required: true, message:'甲方负责人不能为空', trigger:['blur', 'change']}]">
                        <GridSelects :disabled="method === 'edit'" title="选择负责人" labelName="name" labelValue="id"
                          :value="inputForm.aPerson.id" :limit="1" @getValue="getValuaesUser1(arguments)" :columns="[
                            {
                              prop: 'name',
                              label: '用户名',
                            },
                            {
                              prop: 'phone',
                              label: '电话',
                            },
                            {
                              prop: 'office.name',
                              label: '部门',
                            },
                          ]" :searchs="[
                            {
                              prop: 'name',
                              label: '用户名',
                            },
                            {
                              prop: 'phone',
                              label: '电话',
                            },
                          ]" :dataListUrl="setAPersonUrl1" entityBeanName="user" queryEntityUrl="/sys/user/queryById">
                        </GridSelects>
                        <!-- <user-select :limit='1' :value="inputForm.aPerson.id"
                          @getValue='(value) => {inputForm.aPerson.id=value}'>
                        </user-select> -->
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>负责人电话</td>
                    <td class="width-30">
                      <el-form-item prop="aPhone" :rules="[
                  {required: true, message:'甲方电话不能为空', trigger: ['blur','change'],}
                 ]">
                        <el-input v-model="inputForm.aPhone" disabled></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15"><span style="color: red">*&nbsp;</span>开票名称</td>
                    <td class="width-30">
                      <el-form-item prop="aBillingName" :rules="[
                  {required: true, message:'甲方开票名称不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.aBillingName"  :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>纳税人识别号</td>
                    <td class="width-30">
                      <el-form-item prop="aBillingNumber" :rules="[
                  {required: true, message:'甲方开票纳税人识别号不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.aBillingNumber"  :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15"> <span style="color: red">*&nbsp;</span>地<span
                        style="margin-left: 20px">址</span></td>
                    <td class="width-30">
                      <el-form-item prop="aBillingAddress" :rules="[
                  {required: true, message:'甲方开票地址不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.aBillingAddress" disabled></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>电<span
                        style="margin-left: 20px">话</span></td>
                    <td class="width-30">
                      <el-form-item prop="aBillingPhone" :rules="[
                  {required: true, message:'甲方开票电话不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.aBillingPhone" disabled></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15"><span style="color: red">*&nbsp;</span>开 户 行</td>
                    <td class="width-30">
                      <el-form-item prop="aBillingBank" :rules="[
                  {required: true, message:'甲方开票开户行不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.aBillingBank" disabled></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>账<span
                        style="margin-left: 20px">号</span></td>
                    <td class="width-30">
                      <el-form-item prop="aAccountNumber" :rules="[
                  {required: true, message:'甲方开票账号不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.aAccountNumber" disabled></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr style="line-height: 3.5;">
                    <td colspan="4"
                      style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
                      <img src="../../../../../assets/imgs/processManagement/basic.png" alt=""
                        style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
                      乙方信息
                    </td>
                  </tr>
                  <tr>
                    <td colspan="4" style="
                        text-align: left;
                        padding: 10px 32px;
                        position: relative;
                        font-size: 14px;
                      ">合作方式
                      <el-radio-group v-model="inputForm.cooperationMethod" @change="cooperationMethodChange"
                        style="margin-left: 20px" :disabled="method === 'edit'">
                        <el-radio label="0">平台合同</el-radio>
                        <el-radio label="1">普通合同</el-radio>
                      </el-radio-group>
                    </td>
                  </tr>
                  <tr class="iconHiddens errorMsg">
                    <td class="width-15"><span style="color: red">*&nbsp;</span>公<span style="margin-left: 20px">司</span></td>
                    <td class="width-30">
                      <el-form-item prop="bOffice" :rules="[{required: true, message:'乙方公司不能为空', trigger: ['blur','change'],}]">
                        <GridSelects  v-if="inputForm.cooperationMethod==0" title="选择企业" 
                        :disabled="method === 'edit'" labelName="companyName" labelValue="id"
                          :value="inputForm.bOffice" :limit="1" @getValue="getValuaes(arguments)" :columns="[
                            {
                              prop: 'companyName',
                              label: '企业名称',
                            },
                            {
                              prop: 'detailedArea',
                              label: '地址',
                            },
                          ]" :searchs="[
                            {
                              prop: 'companyName',
                              label: '企业名称',
                            },
                            {
                              prop: 'detailedArea',
                              label: '地址',
                            },
                          ]" dataListUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/list"
                          entityBeanName="enterpriseInformation"
                          queryEntityUrl="/dlyrl/hr/enterpriseinformation/enterpriseInformation/queryById">
                        </GridSelects>
                        <el-input  v-if="inputForm.cooperationMethod==1" v-model="inputForm.bOffice" :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>地<span style="margin-left: 20px">址</span></td>
                    <td class="width-30">
                      <el-form-item prop="bAddress" :rules="[{required: true, message:'乙方地址不能为空', trigger: ['blur','change'],}]">
                        <el-input  v-if="inputForm.cooperationMethod==0" v-model="inputForm.bAddress" :disabled="method==='edit' || inputForm.cooperationMethod==0"></el-input>
                        <el-input  v-if="inputForm.cooperationMethod==1" v-model="inputForm.bAddress" :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHiddens errorMsg">
                    <td class="width-15"><span style="color: red">*&nbsp;</span>负 责 人</td>
                    <td class="width-30">
                      <el-form-item prop="bPerson" :rules="[{required: true, message:'乙方负责人不能为空', trigger:['blur', 'change']}]">
                        <GridSelects  v-if="inputForm.cooperationMethod == 0"
                        title="选择负责人" labelName="identityName" labelValue="id" :value="inputForm.bPerson"
                          :limit="1" :disabled="inputForm.bOffice.length == 0" @getValue="getValuaesUser(arguments)"
                          :columns="[
                            {
                              prop: 'identityName',
                              label: '用户名',
                            },
                            {
                              prop: 'phone',
                              label: '电话',
                            },
                          ]" :searchs="[
                            {
                              prop: 'identityName',
                              label: '用户名',
                            },
                            {
                              prop: 'phone',
                              label: '电话',
                            },
                          ]" :dataListUrl="setAPersonUrl" entityBeanName="enterpriseUserInformation"
                          queryEntityUrl="/dlyrl/hr/enterpriseuserinformation/enterpriseUserInformation/queryById">
                        </GridSelects>
                        <el-input  v-if="inputForm.cooperationMethod == 1" v-model="inputForm.bPerson" :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>电<span style="margin-left: 20px">话</span></td>
                    <td class="width-30">
                      <el-form-item prop="bPhone">
                        <el-input v-if="inputForm.cooperationMethod == 0" v-model="inputForm.bPhone" :disabled="method==='edit'  || inputForm.cooperationMethod==0"></el-input>
                        <el-input v-if="inputForm.cooperationMethod == 1" v-model="inputForm.bPhone" :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <!-- <td class="width-30">
                      <el-form-item  prop="cooperationMethod" :rules="[
                  {required: true, message:'合作方式不能为空', trigger:'blur'}
                 ]">
                        <el-select v-model="inputForm.cooperationMethod" placeholder="请选择" style="width: 100%;">
                          <el-option v-for="item in $dictUtils.getDictList('cooperation_method')" :key="item.value"
                            :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </td> -->

                  <tr class="iconHidden">
                    <td class="width-15"><span style="color: red">*&nbsp;</span>开票名称</td>
                    <td class="width-30">
                      <el-form-item prop="bBillingName" :rules="[
                  {required: true, message:'乙方开票名称不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.bBillingName"  :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>纳税人识别号</td>
                    <td class="width-30">
                      <el-form-item prop="bBillingNumber" :rules="[
                  {required: true, message:'乙方开票纳税人识别号不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.bBillingNumber"  :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15"><span style="color: red">*&nbsp;</span>地<span
                        style="margin-left: 20px">址</span></td>
                    <td class="width-30">
                      <el-form-item prop="bBillingAddress" :rules="[
                  {required: true, message:'乙方开票地址不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.bBillingAddress"  :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>电<span
                        style="margin-left: 20px">话</span></td>
                    <td class="width-30">
                      <el-form-item prop="bBillingPhone">
                        <el-input v-model="inputForm.bBillingPhone"  :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr class="iconHidden">
                    <td class="width-15"><span style="color: red">*&nbsp;</span>开 户 行</td>
                    <td class="width-30">
                      <el-form-item prop="bBillingBank" :rules="[
                  {required: true, message:'乙方开票开户行不能为空', trigger:'blur'}
                 ]">
                        <el-input v-model="inputForm.bBillingBank"  :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                    <td class="width-15"><span style="color: red">*&nbsp;</span>账<span
                        style="margin-left: 20px">号</span></td>
                    <td class="width-30">
                      <el-form-item prop="bAccountNumber">
                        <el-input v-model="inputForm.bAccountNumber"  :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <tr style="height: 80px;line-height: 80px">
                    <td class="width-15 active" style="line-height: 80px">备<span style="margin-left:20px">注</span>
                    </td>
                    <td colspan="4" style="padding:0 10px">
                      <el-form-item prop="remarks">
                        <el-input v-model="inputForm.remarks" :disabled="method==='edit'"></el-input>
                      </el-form-item>
                    </td>
                  </tr>
                  <!-- <tr class="iconHidden">
                    
                    <td class="width-15">付款方式</td>
                    <td class="width-30">
                      <el-form-item prop="paytype" :rules="[
                 ]">
                        <el-select v-model="inputForm.paytype" placeholder="请选择" style="width: 100%;">
                          <el-option v-for="item in $dictUtils.getDictList('payway')" :key="item.value"
                            :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </td>
                  </tr> -->
									<tr style="line-height: 3.5" v-if="showButton">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px;">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px;" />
											开票信息
										</td>
									</tr>
									<tr v-if="showButton && power == 3">
										<td colspan="4" class="addDelImg">
											<i v-if="this.showButton" id="add" @click="add"
												class="el-icon-circle-plus"></i>
											<i v-if="this.showButton" id="sub" @click="delAll"
												class="el-icon-remove"></i>
										</td>
									</tr>
									<tr v-if="showButton">
										<td colspan="4" class="elTable">
											<div style="width: 100%">
												<el-table size="small"
													:data="inputForm.ticketList.filter(function (item) {return item.delFlag !== '1';})"
													row-key="id" style="border-collapse: collapse"
													:cell-style="cellStyle_attached"
													:header-cell-class-name="cellHeadStyle_attached"
													:tree-props="{children: 'children',hasChildren: 'hasChildren',}"
													ref="ticketLists">
													<el-table-column type="selection" width="50" align="center">
													</el-table-column>
													<el-table-column prop="invoiceDate" header-align="center"
														align="center" show-overflow-tooltip label="开票日期">
													</el-table-column>
													<el-table-column prop="type" header-align="center" align="center"
														show-overflow-tooltip label="发票类型">
													</el-table-column>
													<el-table-column prop="subType" header-align="center"
														align="center" show-overflow-tooltip label="发票细分类型">
													</el-table-column>
													<el-table-column prop="withTaxAmount" header-align="center"
														align="center" show-overflow-tooltip label="价税合计">
													</el-table-column>
													<el-table-column prop="sysuser.name" header-align="center"
														align="center" show-overflow-tooltip label="收集用户">
													</el-table-column>
													<el-table-column header-align="center" align="center" width="120" label="点击查看">
														<template slot-scope="scope">
															<el-image style="width: 100px; height: 50px" :src="scope.row.dmzUrl"
																:preview-src-list="[scope.row.dmzUrl]"></el-image>
														</template>
													</el-table-column>
													<el-table-column label="操作">
														<template slot-scope="scope">
															<el-button @click="addInvoices(scope)" type="text"
																size="mini">添加发票</el-button>
														</template>
													</el-table-column>
												</el-table>
											</div>
										</td>
									</tr>
                  <tr style="line-height: 3.5;" v-if="showButton">
                    <td colspan="4"
                      style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
                      <img src="../../../../../assets/imgs/processManagement/work.png" alt=""
                        style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
                      付款信息
                    </td>
                  </tr>
                  <tr v-if="showButton  && power==3">
                    <td colspan="4" class="addDelImg">
                      <i id="add" @click="addOaRecordPayRow" class="el-icon-circle-plus"></i>
                    </td>
                  </tr>
                  <tr v-if="showButton">
                    <td colspan="4" class="elTable">
                      <div style="width:100%">
                        <!-- <el-tabs v-model="propayContractTab"> -->
                        <!-- <el-button size="small" @click="addOaRecordPayRow" type="primary">新增</el-button> -->
                        <el-table size="small" row-key="id" style="border-collapse:collapse;"
                          :cell-style="cellStyle_attached" :header-cell-class-name="cellHeadStyle_attached"
                          :tree-props="{ children: 'children', hasChildren: 'hasChildren'}"
                          :data="inputForm.oaRecordPayList.filter(function(item){ return item.delFlag !== '1'})">
                          <el-table-column prop="date" header-align="center" align="center" show-overflow-tooltip
                            label="日期">
                          </el-table-column>
                          <el-table-column prop="money" header-align="center" align="center" show-overflow-tooltip
                            label="金额">
                          </el-table-column>
                          <el-table-column prop="capitalizedAmount" header-align="center" align="center"
                            show-overflow-tooltip label="大写金额">
                          </el-table-column>
                          <el-table-column prop="confirmor.name" header-align="center" align="center"
                            show-overflow-tooltip label="确认人">
                            <template slot-scope="scope">
                              <span v-if="scope.row.confirmor.name != ''">{{
                                scope.row.confirmor.name
                              }}</span>
                              <el-button v-else type="text" size="mini" @click="confimReceivable(scope.row)" :disabled="
                                  power == 0 || power == 1 || power == 2
                                ">确认付款</el-button>
                            </template>
                          </el-table-column>
                          <el-table-column prop="remarks" header-align="center" align="center" show-overflow-tooltip
                            label="备注信息">
                          </el-table-column>
                          <el-table-column fixed="right" label="操作" width="150">
                            <template slot-scope="scope">
                              <el-button @click="viewOaRecordPayRow(scope.row)" type="text" size="mini">查看
                              </el-button>
                              <el-button @click="editOaRecordPayRow(scope.row)" v-if="scope.row.confirmor.name == ''"
                                type="text" size="mini" :disabled="
                                  power == 0 || power == 1 || power == 2
                                ">编辑
                              </el-button>
                              <el-button @click="delOaRecordPayRow(scope.row)" v-if="scope.row.confirmor.name == ''"
                                type="text" size="mini" :disabled="
                                  power == 0 || power == 1 || power == 2
                                ">删除</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <!-- </el-tab-pane> -->
                        <!-- </el-tabs> -->
                      </div>
                    </td>
                  </tr>
                </table>
              </el-form>
            </div>
          </div>
          <!-- 签字弹框 -->
          <div class="signature" v-show="signatureDialog">
            <canvas id="can" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup"
              @mouseleave="mouseleave">Canvas画板</canvas>
            <input type="hidden" value="" name="data" />
            <div class="signatureGroup">
              <div class="signatureBtn">
                <button @click="signatureCancel">
                  取消
                </button>
              </div>
              <div class="signatureBtn">
                <button @click="btnClick">
                  确定
                </button>
              </div>
            </div>
          </div>
					<el-dialog title="添加发票" :visible.sync="addInvoiceDialog" width="70%" append-to-body>
						<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
						      <!-- 搜索框-->
						   <el-form-item prop="invoiceDate">
						          <el-date-picker v-model="searchForm.invoiceDate"
						          	type="date" style="width: 100%;" value-format="yyyy-MM-dd"
						          	format="yyyy-MM-dd" placeholder="开票时间">
						          </el-date-picker>
						   </el-form-item>
						   <el-form-item prop="invoicetype">
						          <el-select v-model="searchForm.invoicetype" placeholder="发票类型"
						          	style="width: 100%;">
						          	<el-option
						          		v-for="(item,index) in $dictUtils.getDictList('invoicebill_type')"
						          		:key="index" :label="item.label" :value="item.value">
						          	</el-option>
						          </el-select>
						   </el-form-item>
						   <el-form-item prop="subType">
						         <el-select v-model="searchForm.subType" placeholder="细分发票类型"
						         	style="width: 100%;">
						         	<el-option
						         		v-for="(item,index) in $dictUtils.getDictList('sub_bill_type')"
						         		:key="index" :label="item.label" :value="item.value">
						         	</el-option>
						         </el-select>
						   </el-form-item>
						    <el-form-item>
						      <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
						      <el-button @click="resetSearch()" size="small">重置</el-button>
						    </el-form-item>
						</el-form>
						<el-table :data="dataList" size="small" height="calc(100% - 80px)"
							@selection-change="selectionChangeHandle" ref="invoiceTables" :cell-style="cellStyle"
							style="border:1px solid #d6cfe2;min-height: 400px;" :header-cell-class-name="cellHeadStyle"
							:row-class-name="tableRowClassName" v-loading="invoiceloading" class="table">
							<el-table-column type="selection" header-align="center" align="center" width="50">
							</el-table-column>
							<el-table-column prop="type" show-overflow-tooltip label="发票类型">
								<template slot-scope="scope">
									{{ $dictUtils.getDictLabel("invoicebill_type", scope.row.type, '-') }}
								</template>
							</el-table-column>
							<el-table-column prop="invoiceCode" show-overflow-tooltip label="发票代码">
							</el-table-column>
							<el-table-column prop="invoiceNo" show-overflow-tooltip label="发票号码">
							</el-table-column>
							<el-table-column prop="invoiceDate" show-overflow-tooltip label="开票日期">
							</el-table-column>
							<el-table-column prop="withTaxAmount" show-overflow-tooltip label="含税价格">
							</el-table-column>
							<el-table-column header-align="center" align="center" fixed="right" :key="Math.random()"
								width="120" label="点击查看">
								<template slot-scope="scope">
									<el-image style="width: 100px; height: 50px" :src="scope.row.dmzUrl"
										:preview-src-list="[scope.row.dmzUrl]"></el-image>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
							:current-page="pageNo" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
							background layout="total, sizes, prev, pager, next, jumper">
						</el-pagination>
						<span slot="footer" class="dialog-footer">
							<el-button size="small" type="primary" @click="addInvoiceClose()" plain>关闭</el-button>
							<el-button size="small" type="primary" @click="addInvoice()" plain>确定</el-button>
						</span>
					</el-dialog>
          <el-dialog title="请选择关联合同" :visible.sync="dialogGUANlht" width="50%">
            <template>
              <el-radio v-model="radioGUANlht" v-for="item in radioGUANlhtList" @change="radioGUANlhtChange(item)"
                :key="item.id" :label="item.id">{{ item.contractName }}</el-radio>
            </template>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogGUANlht = false">取 消</el-button>
              <el-button type="primary" @click="dialogGUANlhtQueding">确 定</el-button>
            </span>
          </el-dialog>
          <OaRecordPayForm ref="oaRecordPayForm" @addRow="saveOaRecordPayRow(arguments)"></OaRecordPayForm>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import OaRecordPayForm from './OaRecordPayForm'
  import UserSelect from '@/components/userSelect'
  import SelectTree from '@/components/treeSelect/treeSelect.vue'
  import GridSelect from '@/components/gridSelect/index.vue'
  import GridSelects from '@/components/gridSelect/index1.vue'
  import tableStyles from '../../../../../utils/mixins'
  export default {
    mixins: [tableStyles],
    data() {
      var bankAccountValid = (rule, value, callback) => {
        const strBin =
          "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
        if (!value) {
          return callback(new Error("账号不能为空"));
        } else if (!Number.isInteger(+value)) {
          callback(new Error("银行卡号必须全为数字"));
        } else if (value.trim().length < 12 || value.trim().length > 19) {
          callback(new Error("银行卡号长度必须在12到19之间"));
        } else if (strBin.indexOf(value.substring(0, 2)) === -1) {
          callback(new Error("银行卡号开头6位不符合规范"));
        } else {
          callback();
        }
      };
      return {
        rules: {
          aPhone: [{
              required: true,
              message: "请输入电话",
              trigger: "blur"
            },
            {
              min: 11,
              max: 11,
              message: "请输入正确的电话",
              trigger: "blur"
            },
            {
              required: true,
              pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)|(^[0][1-9]{2,3}-[0-9]{5,10}$)/,
              message: "请输入正确的电话",
              trigger: "blur",
            },
          ],
          aBillingPhone: [{
              required: true,
              message: "请输入电话",
              trigger: "blur"
            },
            {
              min: 11,
              max: 11,
              message: "请输入正确的电话",
              trigger: "blur"
            },
            {
              required: true,
              pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)|(^[0][1-9]{2,3}-[0-9]{5,10}$)/,
              message: "请输入正确的电话",
              trigger: "blur",
            },
          ],
          aAccountNumber: {
            required: true,
            trigger: "blur",
            validator: bankAccountValid,
          },
          bPhone: [{
              required: true,
              message: "请输入电话",
              trigger: ["blur","change"]
            },
            {
              min: 11,
              max: 11,
              message: "请输入正确的电话",
              trigger: "blur"
            },
            {
              required: true,
              pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)|(^[0][1-9]{2,3}-[0-9]{5,10}$)/,
              message: "请输入正确的电话",
              trigger: "blur",
            },
          ],
          bBillingPhone: [{
              required: true,
              message: "请输入电话",
              trigger: "blur"
            },
            {
              min: 11,
              max: 11,
              message: "请输入正确的电话",
              trigger: "blur"
            },
            {
              required: true,
              pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)|(^[0][1-9]{2,3}-[0-9]{5,10}$)/,
              message: "请输入正确的电话",
              trigger: "blur",
            },
          ],
          bAccountNumber: {
            required: true,
            trigger: "blur",
            validator: bankAccountValid,
          },
        },
        //签字
        signatureVal: "",
        signatureOptions: [{
            value: "0",
            label: "是"
          },
          {
            value: "1",
            label: "否"
          }
        ],
        paint: false, //鼠标左键是否在画板区域按下
        x: null,
        y: null,
        pan: null,
        signatureDialog: false,
        archiveAnnexId: "", //归档附件ID
        signatureUrl: "", //签字成功后返回的路径
        signatureBtnUrl:"",//签字成功，签订合同的接口
        messageShow:false,//是否展示60秒
        sendMessageNum:60,
        messageSuccess:false,//短信通知默认不显示
        //以上签字
        annexArra: [],
        setAPersonUrl: "",
        setAPersonUrl1: "",
        setAPersonUrl2: "",
        userId: "", //用户id
        showButton: false,
        contractId: "", //合同id
        power: "", //权限标识
        archiveAnnexArra: [],
        title: '',
        method: '',
        loading: false,
        //关联合同
        dialogGUANlht: false,
        radioGUANlhtList: [],
        radioGUANlht: "",
        inputForm: {
          id: '',
          oaRecordPayList: [],
					ticketList: [],
          people: {
            id: ''
          },
          peopleOffice: {
            id: ''
          },
          peopleDepartment: {
            id: ''
          },
          date: '',
          contractNumber: '',
          contractName: '',
          associatedType: '',
          associatedContract: '',
          associatedContractName: "", //关联合同ID
          partyA: {
            id: "",
          },
          partyB: "",
          contractAmount: "",
          capitalizeContract: "",
          refundAmount: "",
          returnCapital: "",
          receiptRatio: "",
          contractPerson: {
            id: ''
          },
          unpaidAmount: "",
          capitalizedAmount: "",
          aPerson: {
            id: ''
          },
          aPhone: '',
          aOffice: '',
          aAddress: '',
          aBillingName: '',
          aBillingNumber: '',
          aBillingAddress: '',
          aBillingPhone: '',
          aBillingBank: '',
          aAccountNumber: '',
          bPerson: '',
          bPhone: '',
          bOffice: '',
          bAddress: '',
          bBillingName: '',
          bBillingNumber: '',
          bBillingAddress: '',
          bBillingPhone: '',
          bBillingBank: '',
          bAccountNumber: '',
          begintime: "",
          endtime: "",
          user: {
            id: "",
          },
          annex: "",
          contractLocation: "",
          signingTime: "",
          contractForm: "",
          archive: "",
          archiveAnnex: "",
          descriptions: "",
          cooperationMethod: '0',
          type: "",
          paytype: '',
          remarks: ''
        },
				searchForm: {
					invoiceDate:"",
					invoicetype:"",
					subType:""
				},
				
				// 添加发票
				addInvoiceDialog: false,
				dataList: [],
				invoiceloading: false,
				pageNo: 1,
				pageSize: 10,
				total: 0,
				invoiceIndex: 0,
				invoiceChecks:[],
      }
    },
    props: {
      businessId: {
        type: String,
        default: ''
      },
      formReadOnly: {
        type: Boolean,
        default: false
      }
    },
    components: {
      UserSelect,
      SelectTree,
      OaRecordPayForm,
      GridSelect,
      GridSelects,
    },
    watch: {
      businessId: {
        handler(newVal) {
          if (this.businessId) {
            this.init(this.businessId)
          } else {
            this.$nextTick(() => {
              this.$refs.inputForm.resetFields()
              if (this.$store.state.user.id != "") {
                var users = this.$store.state.user;
              } else {
                var users = JSON.parse(sessionStorage.getItem("userInfo"));
              }
              if(this.$route.query.types){//去除重合数据，显示两个
                this.inputForm.people.id='';
                this.inputForm.peopleOffice.id='';
                this.inputForm.peopleDepartment.id='';
                this.inputForm.applydate='';
              }else{
                this.inputForm.people.id = users.id;
                this.inputForm.peopleOffice.id = users.company.id;
                this.inputForm.peopleDepartment.id = users.office.id;
                this.inputForm.date = this.getNowTime();
                this.inputForm.aOffice = users.company.id;
                this.setAPersonUrl1 =
                  "/sys/user/list?company.id=" + this.inputForm.aOffice;
                this.setAPersonUrl2 =
                  "/sys/user/list?company.id=" +
                  this.inputForm.bOffice +
                  "&office.id=" +
                  this.inputForm.peopleDepartment.id;
                this.$http({
                  url: `/sys/oa/contractRelated/getSysEnterprise`,
                  method: "get",
                  params: {
                    oid: this.inputForm.aOffice,
                  },
                }).then(({
                  data
                }) => {
                  if (data) {
                    this.inputForm.aAddress = data.enterprise.address;
                    this.inputForm.aBillingNumber = data.enterprise.billingNumber;
                    this.inputForm.aBillingAddress = data.enterprise.addresss;
                    this.inputForm.aBillingPhone = data.enterprise.iphone;
                    this.inputForm.aBillingBank = data.enterprise.accountBank;
                    this.inputForm.aAccountNumber = data.enterprise.accountNumber;
                  }
                });
              }
            })
          }
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem(
          "userInfo",
          JSON.stringify(this.$store.state.user)
        );
      });
    },
    mounted() {
      setTimeout(() => {
        var canvas = document.getElementById("can");
        this.pan = canvas.getContext("2d"); //获取2D图像API接口
        this.pan.strokeStyle = "#000000"; //设置画笔颜色
        this.pan.lineJoin = "round"; //设置画笔轨迹基于圆点拼接
        this.pan.lineWidth = 3; //设置画笔粗细
      }, 1000);
    },
    methods: {
			addInvoice(){
				console.log(this.invoiceChecks);
				if(this.inputForm.ticketList[0].id==""){
					this.inputForm.ticketList=[];
				}
				for(var i=0;i<this.invoiceChecks.length;i++){
					this.inputForm.ticketList.push(this.invoiceChecks[i]);
				}
				this.addInvoiceDialog = false;
			},
			addInvoices(scope) {
				this.invoiceIndex = scope.$index;
				this.addInvoiceDialog = true;
				this.refreshList();
			},
			addInvoiceClose(){
				this.addInvoiceDialog=false;
			},
			resetSearch () {
			  this.$refs.searchForm.resetFields()
			  this.refreshList()
			},//合同预警
			refreshList() {
				this.invoiceloading = true
				this.$http({
					url: '/zhaohang/invoice/web/companyticket/sysCompanyTicket/getComTicketList',
					method: 'get',
					params: {
						'companyId':this.$store.state.user.companyId,
						'userId':this.$store.state.user.id,
						'type':"1",
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list
						this.total = data.page.count
						this.invoiceloading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			selectionChangeHandle(val) {
				console.log(val);
				this.invoiceChecks=val;
			},
			//添加
			add() {
				let i = this.inputForm.ticketList.length
				if ((i == 0) ||
					(this.inputForm.ticketList[i - 1].invoiceDate != '' && this.inputForm.ticketList[i - 1].type != '' &&
						this.inputForm.ticketList[i -
							1].subType != '' && this.inputForm.ticketList[i - 1].withTaxAmount != '' && this
						.inputForm.ticketList[i - 1].suser != '' && this.inputForm.ticketList[i - 1].dmzUrl != '')
				) {
					let addTable = {
						invoiceDate: '', // 开票日期 
						type: '', // 发票类型
						subType: '', // 细分发票类型
						withTaxAmount: '', // 含税价格
						suser: '', // 收集人 
						dmzUrl: '', // 发票图片url
						id: '',
					}
					this.inputForm.ticketList.push(addTable)
				} else {
					this.$message.warning('请先填写当前已有行所有必填数据');
				}
			},
			//删除
			delAll() {
				for (var i = this.$refs.ticketLists.selection.length - 1; i >= 0; i--) {
					this.inputForm.ticketList.splice(this.$refs.ticketLists.selection[i].index, 1)
					this.$refs.invoiceTables.toggleRowSelection(this.$refs.ticketLists.selection[i], false);
				}
				this.$refs.ticketLists.clearSelection();
			},
       //签字
      signatureChange(e) {
        if (e == 0) {
          this.signatureDialog = true;
        } else {
          this.signatureDialog = false;
        }
      },
      mousedown(e) {
        this.paint = true;
        this.x = e.offsetX;
        this.y = e.offsetY;
        this.pan.beginPath();
        this.pan.moveTo(this.x, this.y);
      },
      // 鼠标移动
      mousemove(e) {
        if (this.paint) {
          var nx = e.offsetX,
            ny = e.offsetY;
          this.pan.lineTo(this.x, this.y);
          this.pan.stroke();
          this.x = nx;
          this.y = ny;
        }
      },
      // 鼠标松开
      mouseup(e) {
        this.paint = false;
      },
      mouseleave(e) {
        this.paint = false;
      },
      btnClick() {
        var canvas = document.getElementById("can");
        var data = canvas.toDataURL("image/png"); //把canvas画板上的内容转成指定格式图片数据，并进行Base64编码
        console.log(data, "-------");
          this.$http({ //保存图片的接口
            url: `/dlyrlTest/uploadBase`,
            method: "post",
            params: {
              base: data
            }
          }).then(({
            data
          }) => {
            if (data) {
              console.log(data, "fanhiude");
              this.signatureUrl = data.url
              //签订合同的接口
              this.$http({ 
                url: `/dlyrl/oa/propaycontract/propayContract/signProContract`,
                method: "get",
                params: {
                  contractId:this.contractId,
                  pdfPath:this.archiveAnnexId,
                  signpicture:this.signatureUrl
                }
              }).then(({
                data
              }) => {
                if (data) {
                  this.signatureBtnUrl = data.url
                   this.$message.success(data.msg);
                   this.messageSuccess=true;
                }
              });
            }
          });
        
        // 重新设置宽度  就可以清除画板
        var canvas = document.getElementById("can");
        canvas.width = canvas.width;
        this.signatureDialog = false;
      },

      // 取消
      signatureCancel() {
        this.signatureDialog = false;
        this.signatureVal = "1";
        var canvas = document.getElementById("can");
        canvas.width = canvas.width;
        console.log(this.signatureVal);
      },
      // PDF 上传之前钩子调用
      beforeUploadPDF(file) {
        const extension = file.name.split('.').slice(-1) == 'pdf';
        if (!extension) {
          this.$message.error('上传模板只能是pdf格式!');
          return false;
        }
      },
      // 上传失败
      upError(e) {
        this.$msg("上传失败", "error");
      },    
      sendMessage() {
        this.$http({
          url: "/dlyrl/oa/commercialcontract/commercialContract/sendMsg",
          method: "get",
          params: {
            contractId: this.contractId,
            type: '3'
          },
        }).then(({ data }) => {
          if (data && data.success) {
            this.messageShow = true
            this.$message.success(data.msg);
            let interval = setInterval(() => {
              this.sendMessageNum--;
            if(this.sendMessageNum<=0){
                this.messageShow = false;
                clearInterval(interval)
              }
            },1000)
          }
          this.sendMessageNum = "60";
        });
      },
      //以上签字
      init(id, method) {
        this.method = method;
        this.contractId = id;
        if (this.$store.state.user.id != '') {
          this.userId = this.$store.state.user.id;
        } else {
          this.userId = JSON.parse(sessionStorage.getItem("userInfo")).id;
        }
        if (method == "edit") {
          this.accessPermissions();
        }
        if (id) {
          this.showButton = true
        this.annexArra = [];
        this.archiveAnnexArra = [];
          this.inputForm.oaRecordPayList = []
          this.loading = true
          this.inputForm.id = id
          this.$nextTick(() => {
            this.$refs.inputForm.resetFields()
            this.$http({
              url: `/dlyrl/oa/propaycontract/propayContract/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({
              data
            }) => {
              this.inputForm = this.recover(this.inputForm, data.propayContract);
              if(data.propayContract.archive==2){
                this.messageSuccess=true;
              }
              this.inputForm.annex.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.annexArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                }
              });
              this.inputForm.archiveAnnex.split("|").forEach((item) => {
                if (item.trim().length > 0) {
                  this.archiveAnnexArra.push({
                    name: decodeURIComponent(
                      item.substring(item.lastIndexOf("/") + 1)
                    ),
                    url: item,
                  });
                }
              });
              this.loading = false
              this.moneySwitch();
              this.refundAmountSwitch(); //付款转大写
              this.unpaidAmountSwitch(); //未付款转大写
            })
          })
        }
      },
      saveOaRecordPayRow(child) {
        if (child[0] === '') {
          this.inputForm.oaRecordPayList.push(child[1])
        } else {
          this.inputForm.oaRecordPayList.forEach((item, index) => {
            if (item === child[0]) {
              this.inputForm.oaRecordPayList.splice(index, 1, child[1])
            }
          })
        }
      },
      addOaRecordPayRow(child) {
        this.$refs.oaRecordPayForm.init('add')
      },
      viewOaRecordPayRow(child) {
        this.$refs.oaRecordPayForm.init('view', child)
      },
      editOaRecordPayRow(child) {
        this.$refs.oaRecordPayForm.init('edit', child)
      },
      delOaRecordPayRow(child) {
        this.inputForm.oaRecordPayList.forEach((item, index) => {
          if (item === child && item.id === '') {
            this.inputForm.oaRecordPayList.splice(index, 1)
          } else if (item === child) {
            item.delFlag = '1'
            this.inputForm.oaRecordPayList.splice(index, 1, item)
          }
        })
      },
      // 表单提交
      saveForm(callback) {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/dlyrl/oa/propaycontract/propayContract/save`,
              method: 'post',
              data: this.inputForm
            }).then(({
              data
            }) => {
              this.loading = false
              if (data && data.success) {
                callback(data.businessTable, data.businessId);
                this.$refs.inputForm.resetFields();
                this.inputForm.people.id = users.id;
                this.inputForm.peopleOffice.id = users.company.id;
                this.inputForm.peopleDepartment.id = users.office.id;
                this.inputForm.date = this.getNowTime();              
              }
            })
          }
        })
      },
      getValuaes(value) {
        this.inputForm.bOffice = value[0];
        this.inputForm.bAddress = value[1];
        this.setAPersonUrl =
          "/dlyrl/hr/enterpriseuserinformation/enterpriseUserInformation/list?enterpriseInformation.id=" +
          this.inputForm.bOffice;
      },
      getValuaesUser(value) {
        this.inputForm.bPerson = value[0];
        this.inputForm.bPhone = value[2];
      },
      getValuaesUser2(value) {
        // console.log(value);
        this.inputForm.contractPerson.id = value[0];
      },
      getValuaesUser1(value) {
        this.inputForm.aPerson.id = value[0];
        this.inputForm.aPhone = value[2];
      },
      //合作方式发生改变
      cooperationMethodChange() {
        this.inputForm.bOffice = "";
        this.inputForm.bAddress = "";
        this.inputForm.bPerson = "";
        this.inputForm.bPhone = "";
      },
      associatedTypeChange(value) {
        if (value == 0) {
          this.$http({
            url: `/dlyrl/oa/commercialcontract/commercialContract/list`,
            method: "get",
            params: {
              archive: 0
            },
          }).then(({
            data
          }) => {
            if (data && data.success) {
              this.radioGUANlhtList = data.page.list;
            }
          });
        } else if (value == 1) {
          this.$http({
            url: `/dlyrl/oa/oaprojectcontract/oaProjectContract/list`,
            method: "get",
            params: {
              archive: 1
            },
          }).then(({
            data
          }) => {
            if (data && data.success) {
              this.radioGUANlhtList = data.page.list;
            }
          });
        }
        this.dialogGUANlht = true;
        this.radioGUANlht = "";
        console.log(this.radioGUANlhtList, "this.radioGUANlhtList");
      },
      radioGUANlhtChange(value) {
        this.inputForm.associatedContract = ''
        this.associatedContractName = ''
        console.log(value, "value");
        this.inputForm.associatedContract = value.id;
        this.inputForm.associatedContractName = value.contractName;
      },
      dialogGUANlhtQueding() {
        this.dialogGUANlht = false;
        console.log(this.inputForm.associatedContract, this.inputForm.associatedContractName);
      },
      //查询权限
      accessPermissions() {
        this.$http({
          url: `/dlyrl/oa/propaycontract/propayContract/findArchive`,
          method: "get",
          params: {
            userid: this.userId,
            contractid: this.contractId,
          },
        }).then(({
          data
        }) => {
          if (data) {
            console.log(data,'data12')
            this.power = data.power;
          }
        });
      },
      //结束日期不能小于开始日期
      judgeHour() {
        if (
          this.inputForm.beginTime.length != 0 &&
          this.inputForm.endTime.length != 0
        ) {
          var startDate = new Date(this.inputForm.beginTime);
          var endDate = new Date(this.inputForm.endTime);
          if ((endDate - startDate) / 86400000 < 7) {
            this.$message.warning("结束日期必须大于开始日期最少7天");
            this.inputForm.endTime = "";
            return false;
          }
        }
      },
      //合同形式发生改变
      contractFormChange(val) {
        this.inputForm.user.id='';
        this.inputForm.contractLocation='';
        this.archiveAnnexArra=[];
        if(val==0){
          this.$refs.inputForm.clearValidate(['archiveAnnex'])
        }
      },
      //发起流程合同金额转大写
      moneySwitch() {
        var money = this.inputForm.contractAmount;

        var cnNums = new Array(
          "零",
          "壹",
          "贰",
          "叁",
          "肆",
          "伍",
          "陆",
          "柒",
          "捌",
          "玖"
        );
        //基本单位
        var cnIntRadice = new Array("", "拾", "佰", "仟");
        //对应整数部分扩展单位
        var cnIntUnits = new Array("", "万", "亿", "兆");
        //对应小数部分单位
        var cnDecUnits = new Array("角", "分", "毫", "厘");
        //整数金额时后面跟的字符
        var cnInteger = "整";
        //整型完以后的单位
        var cnIntLast = "元";
        //最大处理的数字
        var maxNum = 999999999999999.9999;
        //金额整数部分
        var integerNum;
        //金额小数部分
        var decimalNum;
        //输出的中文金额字符串
        var chineseStr = "";
        //分离金额后用的数组，预定义
        var parts;
        if (money == "") {
          this.inputForm.capitalizeContract = chineseStr;
        }
        money = parseFloat(money);
        if (money >= maxNum) {
          //超出最大处理数字
          return "";
        }
        if (money == 0) {
          chineseStr = cnNums[0] + cnIntLast + cnInteger;
        }
        //转换为字符串
        money = money.toString();
        if (money.indexOf(".") == -1) {
          integerNum = money;
          decimalNum = "";
        } else {
          parts = money.split(".");
          integerNum = parts[0];
          decimalNum = parts[1].substr(0, 4);
        }
        //获取整型部分转换
        if (parseInt(integerNum, 10) > 0) {
          var zeroCount = 0;
          var IntLen = integerNum.length;
          for (var i = 0; i < IntLen; i++) {
            var n = integerNum.substr(i, 1);
            var p = IntLen - i - 1;
            var q = p / 4;
            var m = p % 4;
            if (n == "0") {
              zeroCount++;
            } else {
              if (zeroCount > 0) {
                chineseStr += cnNums[0];
              }
              //归零
              zeroCount = 0;
              chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
            }
            if (m == 0 && zeroCount < 4) {
              chineseStr += cnIntUnits[q];
            }
          }
          chineseStr += cnIntLast;
        }
        //小数部分
        if (decimalNum != "") {
          var decLen = decimalNum.length;
          for (var i = 0; i < decLen; i++) {
            var n = decimalNum.substr(i, 1);
            if (n != "0") {
              chineseStr += cnNums[Number(n)] + cnDecUnits[i];
            }
          }
        }
        if (chineseStr == "") {
          chineseStr += cnNums[0] + cnIntLast + cnInteger;
        } else if (decimalNum == "" && money != 0) {
          chineseStr += cnInteger;
        }
        this.inputForm.capitalizeContract = chineseStr;
      },
      //回显付款金额转大写
      refundAmountSwitch() {
        var money = this.inputForm.refundAmount;
        var cnNums = new Array(
          "零",
          "壹",
          "贰",
          "叁",
          "肆",
          "伍",
          "陆",
          "柒",
          "捌",
          "玖"
        );
        //基本单位
        var cnIntRadice = new Array("", "拾", "佰", "仟");
        //对应整数部分扩展单位
        var cnIntUnits = new Array("", "万", "亿", "兆");
        //对应小数部分单位
        var cnDecUnits = new Array("角", "分", "毫", "厘");
        //整数金额时后面跟的字符
        var cnInteger = "整";
        //整型完以后的单位
        var cnIntLast = "元";
        //最大处理的数字
        var maxNum = 999999999999999.9999;
        //金额整数部分
        var integerNum;
        //金额小数部分
        var decimalNum;
        //输出的中文金额字符串
        var chineseStr = "";
        //分离金额后用的数组，预定义
        var parts;
        if (money == "") {
          this.inputForm.returnCapital = chineseStr;
        }
        money = parseFloat(money);
        if (money >= maxNum) {
          //超出最大处理数字
          return "";
        }
        if (money == 0) {
          chineseStr = cnNums[0] + cnIntLast + cnInteger;
        }
        //转换为字符串
        money = money.toString();
        if (money.indexOf(".") == -1) {
          integerNum = money;
          decimalNum = "";
        } else {
          parts = money.split(".");
          integerNum = parts[0];
          decimalNum = parts[1].substr(0, 4);
        }
        //获取整型部分转换
        if (parseInt(integerNum, 10) > 0) {
          var zeroCount = 0;
          var IntLen = integerNum.length;
          for (var i = 0; i < IntLen; i++) {
            var n = integerNum.substr(i, 1);
            var p = IntLen - i - 1;
            var q = p / 4;
            var m = p % 4;
            if (n == "0") {
              zeroCount++;
            } else {
              if (zeroCount > 0) {
                chineseStr += cnNums[0];
              }
              //归零
              zeroCount = 0;
              chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
            }
            if (m == 0 && zeroCount < 4) {
              chineseStr += cnIntUnits[q];
            }
          }
          chineseStr += cnIntLast;
        }
        //小数部分
        if (decimalNum != "") {
          var decLen = decimalNum.length;
          for (var i = 0; i < decLen; i++) {
            var n = decimalNum.substr(i, 1);
            if (n != "0") {
              chineseStr += cnNums[Number(n)] + cnDecUnits[i];
            }
          }
        }
        if (chineseStr == "") {
          chineseStr += cnNums[0] + cnIntLast + cnInteger;
        } else if (decimalNum == "" && money != 0) {
          chineseStr += cnInteger;
        }
        this.inputForm.returnCapital = chineseStr;
      },
      //回显未付款金额转大写
      unpaidAmountSwitch() {
        var money = this.inputForm.unpaidAmount;
        var cnNums = new Array(
          "零",
          "壹",
          "贰",
          "叁",
          "肆",
          "伍",
          "陆",
          "柒",
          "捌",
          "玖"
        );
        //基本单位
        var cnIntRadice = new Array("", "拾", "佰", "仟");
        //对应整数部分扩展单位
        var cnIntUnits = new Array("", "万", "亿", "兆");
        //对应小数部分单位
        var cnDecUnits = new Array("角", "分", "毫", "厘");
        //整数金额时后面跟的字符
        var cnInteger = "整";
        //整型完以后的单位
        var cnIntLast = "元";
        //最大处理的数字
        var maxNum = 999999999999999.9999;
        //金额整数部分
        var integerNum;
        //金额小数部分
        var decimalNum;
        //输出的中文金额字符串
        var chineseStr = "";
        //分离金额后用的数组，预定义
        var parts;
        if (money == "") {
          this.inputForm.capitalizedAmount = chineseStr;
        }
        money = parseFloat(money);
        if (money >= maxNum) {
          //超出最大处理数字
          return "";
        }
        if (money == 0) {
          chineseStr = cnNums[0] + cnIntLast + cnInteger;
        }
        //转换为字符串
        money = money.toString();
        if (money.indexOf(".") == -1) {
          integerNum = money;
          decimalNum = "";
        } else {
          parts = money.split(".");
          integerNum = parts[0];
          decimalNum = parts[1].substr(0, 4);
        }
        //获取整型部分转换
        if (parseInt(integerNum, 10) > 0) {
          var zeroCount = 0;
          var IntLen = integerNum.length;
          for (var i = 0; i < IntLen; i++) {
            var n = integerNum.substr(i, 1);
            var p = IntLen - i - 1;
            var q = p / 4;
            var m = p % 4;
            if (n == "0") {
              zeroCount++;
            } else {
              if (zeroCount > 0) {
                chineseStr += cnNums[0];
              }
              //归零
              zeroCount = 0;
              chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
            }
            if (m == 0 && zeroCount < 4) {
              chineseStr += cnIntUnits[q];
            }
          }
          chineseStr += cnIntLast;
        }
        //小数部分
        if (decimalNum != "") {
          var decLen = decimalNum.length;
          for (var i = 0; i < decLen; i++) {
            var n = decimalNum.substr(i, 1);
            if (n != "0") {
              chineseStr += cnNums[Number(n)] + cnDecUnits[i];
            }
          }
        }
        if (chineseStr == "") {
          chineseStr += cnNums[0] + cnIntLast + cnInteger;
        } else if (decimalNum == "" && money != 0) {
          chineseStr += cnInteger;
        }
        this.inputForm.capitalizedAmount = chineseStr;
      },
      //回显文件点击下载功能
      handlePreview(file) {
        document.location.href = file.url;
      },
      // 专用于编辑附表表单提交
      submit(){
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            // console.log("this.inputForm",this.inputForm)
            this.$http({
              url: `/dlyrl/oa/propaycontract/propayContract/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                 this.$message.success(data.msg);
              }
            })
          }
        })
      },
    }
  }
</script>
<style scoped>
  .signature {
    width: 324px;
    height: 210px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0px 0px 5px #999;
    padding: 10px;
    margin: 0 auto;
  }

  .signature #can {
    background: #fff;
    border: 1px dashed red;
  }

  .signature .signatureGroup {
    margin-top: 10px;
    width: 100%;
  }

  .signature .signatureGroup .signatureBtn {
    width: 49%;
    float: left;
    text-align: center;
  }
</style>
       